<template>
  <div class="container">
    <div class="f-checkbox">
      <input type="checkbox" name="" id="checkAll" v-model="checkedAll" @change="checkAll" />
      <label for="checkAll">全选</label>
    </div>
    <div class="deleteitems">
      <a href="javascript:;">删除选中商品</a>
    </div>
    <div class="clearcar">
      <a href="javascipt:;" @click="clearAll">
        <strong>清空购物车</strong>
      </a>
    </div>
    <div class="amount-sum">
      已选择
      <strong style="color: red;">{{ quantity }}</strong>
      件商品
    </div>
    <div class="price-sum">
      总价(不含配送费)：
      <strong style="color: red; font-size: 14px;">￥{{ total }}</strong>
    </div>
    <button :disabled="mark === false" :class="{ disable: mark === false }" @click="confirm">结算</button>
  </div>
</template>

<script>
export default {
  props: {
    chose: {
      type: Boolean,
      required: true
    },
    quantity: {
      type: Number,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    mark: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      checkedAll: this.hello
    }
  },
  watch: {
    chose: function(val) {
      this.checkedAll = val
    }
  },
  methods: {
    checkAll() {
      this.$emit('seleteAll', this.checkedAll)
    },
    clearAll() {
      this.$emit('clearAll')
    },
    // 触发结算
    confirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="less" scoped>
label {
  cursor: pointer;
}
a {
  text-decoration: none;
  color: #434343;
}
a:hover {
  color: red;
}
.container {
  height: 57px;
  width: 986px;
  margin: 10px auto;
  margin-bottom: 30px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 14px;
  color: #434343;
  font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, '\u5b8b\u4f53', sans-serif;
  line-height: 57px;
  user-select: none;
  .f-checkbox {
    float: left;
    margin-left: 10px;
  }
  .deleteitems {
    float: left;
    margin-left: 30px;
  }
  .clearcar {
    float: left;
    margin-left: 30px;
  }
  .amount-sum {
    float: left;
    margin-left: 350px;
  }
  .price-sum {
    float: left;
    margin-left: 10px;
    font-size: 6px;
  }
  button {
    float: right;
    background: #ff4400;
    outline: none;
    border: transparent;
    font-size: 20px;
    font-family: Microsoft YaHei;
    color: #fff;
    height: 57px;
    width: 110px;
  }
  .disable {
    background-color: #b0b0b0;
    cursor: not-allowed;
  }
}
</style>
